<template>
	<ex-dialog v-model="visible" draggable :title="form.userName ? form.userName : (form.id ? form.userName : '新增')"
  width="700" :contentHeight="450">
	  <template #default>
		<el-tabs v-model="activeName"  style="height: 100%">
		  <el-tab-pane label="基本信息" name="base" style="height: 100%">
			<el-row :gutter="80">
			  <el-col :lg="24">
				<el-form :model="form" :rules="button_rules" ref="dialogForm" label-width="100px" label-position="left">
				  <el-form-item label="所在部门" prop="orgId">
            <ex-cascader v-model="form.orgId" dict-code="SysOrganization" placeholder="所在部门"></ex-cascader>
<!--					<el-cascader v-model="form.orgId" :options="deptOptions" :props="deptProps"-->
<!--								 :show-all-levels="false" placeholder="所在部门" clearable filterable></el-cascader>-->
				  </el-form-item>
<!--				  <el-form-item label="操作员编码" prop="userCode">-->
<!--					<el-input v-model="form.userCode" clearable placeholder="操作员编码"></el-input>-->
<!--				  </el-form-item>-->
				  <el-form-item label="操作员名称" prop="userName">
					<el-input v-model="form.userName" clearable placeholder="操作员名称"></el-input>
				  </el-form-item>
				  <el-form-item label="登录账号" prop="loginName">
					<el-input v-model="form.loginName" clearable placeholder="登录账号"></el-input>
				  </el-form-item>
				  <el-form-item label="用户手机号" prop="mobile">
					<el-input v-model="form.mobile" clearable placeholder="用户手机号"></el-input>
				  </el-form-item>
				  <el-form-item label="用户邮箱" prop="email">
					<el-input v-model="form.email" clearable placeholder="用户邮箱"></el-input>
				  </el-form-item>
				  <el-form-item label="排序" prop="orderWeight">
					<el-input v-model="form.orderWeight" clearable placeholder="排序"></el-input>
				  </el-form-item>
				  <el-form-item label="描述" prop="description">
					<el-input v-model="form.description" clearable placeholder="描述"></el-input>
				  </el-form-item>
				</el-form>
			  </el-col>
			</el-row>
		  </el-tab-pane>
<!--		  <el-tab-pane label="可用菜单" name="SysMenu" style="height: 100%">-->
<!--			<ex-rel-table  ref="menuRelTable" size="small" :rel-entity="form" :treeApi="this.$API.system.menu.treeData" default-expand-all></ex-rel-table>-->
<!--		  </el-tab-pane>-->
		  <el-tab-pane label="分配角色" name="SysDic" style="height: 100%">
			<ex-rel-table ref="roleRelTable" size="small" :rel-entity="form" :treeApi="this.$API.system.role.treeData" default-expand-all></ex-rel-table>
		  </el-tab-pane>
			<el-tab-pane label="管理部门" name="ManageDept" style="height: 100%">
					<ex-rel-table ref="manageDeptTable" name="ManageDept" size="small" :rel-entity="form" :treeApi="this.$API.system.dept.treeData" default-expand-all></ex-rel-table>
			</el-tab-pane>
			<el-tab-pane label="审批部门" name="AuditDept" style="height: 100%">
				<ex-rel-table ref="auditDeptTable" name="AuditDept"  size="small" :rel-entity="form" :treeApi="this.$API.system.dept.treeData" default-expand-all></ex-rel-table>
			</el-tab-pane>
		</el-tabs>
	  </template>
	  <template #footer>
		<div style="flex: auto;text-align: center">
		  <el-button plain type="primary" @click="save" :loading="loading">保 存</el-button>
		  <el-button plain type="warning" @click="reset" :loading="loading">重 置</el-button>
		  <el-button plain type="info" @click="this.visible = false" :loading="loading">关 闭</el-button>
		</div>
	  </template>

	</ex-dialog>
  </template>

  <script>
  import scIconSelect from '@/components/scIconSelect'
  import ExRelTable from "@/components/exRelTable/index.vue";
  import ExCascader from "@/components/exCascader/index.vue";
  import entity from "@/constant/model/entity";
  import exDialog from '@/components/exDialog';
  import BaseTemplate from "@/utils/baseTemplate";

  export default {
	computed: {
	},
	emits: ['success'],
	components: {
    ExCascader,
	  ExRelTable,
	  scIconSelect,
	  exDialog
	},
	props: {
	  menu: {
		type: Object, default: () => {
		}
	  },
	},
	data() {
	  return {
		activeName: 'base',
		visible: false,
		form: {
		  id: "",
		  userCode: "",
		  userName: "",
		  loginName: "",
		  email: "",
		  mobile: "",
		  orderWeight: "",
		  description: "",
		},
		deptOptions:[],
		deptProps: {
		  value: 'id',
		  label: 'label',
		  checkStrictly: true,
		  emitPath:false,
		},
		button_rules: {
			userName: [
			{required: true, message: "请输入操作员名称", trigger: "blur"},
		  ],
		  // userCode: [
			// {required: true, message: "请输入操作员编码", trigger: "blur"},
		  // ],
		  loginName: [
			{required: true, message: "请输入登录账号", trigger: "blur"},
		  ],
		},
		loading: false,
		oldForm: null,
	  }
	},
	watch: {},
	mounted() {

	},
	methods: {
	  async initData() {
		this.deptOptions = await this.$cache.tree.options(this.$API.system.dept.treeData.storeName, {});
	  },
	  relHandler(relMap) {
		if (!this.form.relMaps) {
		  this.form.relMaps = {};
		}
		for (let key in relMap) {//清空旧的数据
		  this.form.relMaps[key] = {};
		}
		//重新赋值新数据
		Object.assign(this.form.relMaps, relMap);
	  },

	  //显示
	  open(entity) {
		this.form = Object.assign({}, entity);
		this.oldForm = Object.assign({}, this.form);
		this.visible = true;
		this.activeName = "base";
		this.initData();
	  },
	  reset() {
		this.form = Object.assign({}, this.oldForm);
		  for(let ref in this.$refs){
			  try {
				  this.$refs[ref].refresh();
			  }catch (e){
			  }
		  }
	  },
	  //保存
	  async save() {
      let valid = await BaseTemplate.validate(this,this.$refs.dialogForm);
		if (valid) {
		  try {
			this.loading = true
			var res;
			if (this.form.id) {
			  res = await this.$API.system.operator.edit.post(this.form)
			} else {
			  res = await this.$API.system.operator.add.post(this.form)
			}
			if (res.code === 2000) {
			  this.$emit('success');
			  this.$message.success(this.$t("code."+res.code));
			  this.$store.dispatch("commit",entity.SysUser.name);
			  this.visible = false;
			} else {
			  this.$message.warning(res.message)
			}
		  } finally {
			this.loading = false
		  }
		}
	  },
	}
  }
  </script>

  <style scoped>
  h2 {
	font-size: 17px;
	color: #3c4a54;
	padding: 0 0 30px 0;
  }

  [data-theme="dark"] h2 {
	color: #fff;
  }

  </style>
